<script>
//import { selectUserMenu } from '@/api/authApi';
import { useAuthStore } from '@/stores/authStore';
import { ArrowDown } from '@element-plus/icons-vue';
import { mapWritableState, mapActions } from 'pinia';

export default {
  // data() {
  //   return {
  //     menus: []
  //   }
  // },
  computed: {
    ...mapWritableState(useAuthStore, ['currentUser', 'token', 'menus', 'activeTitle'])
  },
  methods: {
    ...mapActions(useAuthStore, ['clearStore']),
    //   async initMenus() {
    //     this.menus = await selectUserMenu()
    //   },
    // },
    // created() {
    //   this.initMenus()
    loginOut() {
      this.clearStore()
      // this.currentUser = null
      // this.token = null
      // this.menus = []
      this.$router.push({
        name: 'login',
      })
    },
  },
}

</script>

<template>
  <el-container class="home-box">
    <el-header>
      <div class="logo-box-left">
        <img src="@/assets/img/logo.png" class="logo" />
        <span>教务选课系统</span>
      </div>
      <div class="logo-box-right">
        <img src="@/assets/img/user.jpg" class="user" />
        <el-dropdown trigger="hover" placement="bottom-end">
          <div class="dropdown-trigger">{{ admUser?.username ?? '' }}</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginOut()">
                <!-- <el-icon size="small"></el-icon> -->
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="box">
      <el-aside width="250px">
        <el-menu background-color="#324157" text-color="white" router :default-active="$route.path">
          <el-menu-item v-for="m in menus" :key="m.right_id" :index="m.right_path" @click="activeTitle = m.right_name">
            <el-icon v-html="m.right_icon"></el-icon>
            <span>{{ m.right_name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card class="data">
          <router-view></router-view>
          <template #header>
            {{ activeTitle }}
          </template>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.home-box {
  height: 100%;
}

.el-header {
  background-color: #242f42;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #324157;
  color: white;
}

.logo-box-left {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo {
  height: 75%;
  border-radius: 8px;
  margin-right: 10px;
}

.logo-box-right {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-box-right {
  margin-right: 8px;
}

.logo-box-right img {
  margin-right: 8px;
}

.user {
  height: 75%;
  border-radius: 50%;
}

.el-menu-item.is-active :deep(svg *) {
  stroke: #409eff;
}

.el-card {
  height: 100%;
  box-sizing: border-box;
}

.box {
  height: 100%;
  overflow: hidden;
}

.data {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.data :deep(.el-card__body) {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
</style>
